<template>
  <div>
    <el-row class="form">
      <el-col :span="11">
        <p>Your name</p>
        <el-input
          placeholder=""
          v-model="userInfo.username"
          clearable
        >
        </el-input>
        <p>Password</p>
        <el-input
          type="password"
          placeholder=""
          v-model="userInfo.password"
          clearable>
        </el-input>
      </el-col>
      <el-col :span="11" :offset="2">
        <p>Telephone</p>
        <el-input
          placeholder=""
          v-model="userInfo.telephone"
          :disabled="true"
          clearable
        >
        </el-input>
        <p>Address</p>
        <div>

          <el-select v-model="add1" placeholder="请选择">
            <el-option
              v-for="(item,i) in Addr1"
              :key="i"
              :label="item"
              :value="i">
            </el-option>
          </el-select>
          <el-select v-model="add2" placeholder="请选择">
            <el-option
              v-for="(item,i) in Addr2"
              :key="i"
              :label="item.name"
              :value="i">
            </el-option>
          </el-select>
          <el-select v-model="add3" placeholder="请选择">
            <el-option
              v-for="(item,i) in Addr2[add2].list"
              :key="i"
              :label="item"
              :value="i">
            </el-option>
          </el-select>
          <el-input
            v-model="add4"
          >
          </el-input>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center" style="margin-top:240px;">
      <el-button type="primary">Change</el-button>
    </el-row>
  </div>

</template>

<script>
  export default {
    name: "GDFunctionUserInfo",
    data() {
      return {
        userInfo : {username: '', password: '', repeat: '', telephone: '', add1: 0, add2: 0, add3: '', add4: ''},
        add1: 0,
        add2: 0,
        add3:'',
        add4:'',
        Addr1: [],
        Addr2: []
      }
    },
    created() {
      this.Addr1 = this.api.address1;
      this.Addr2 = this.api.address2;
      this.userInfo={
        username: this.$store.state.user.username,
        password: this.$store.state.user.password,
        telephone: this.$store.state.user.telephone,
        add1: this.$store.state.user.add1,
        add2: this.$store.state.user.add2,
        add3: this.$store.state.user.add3,
        add4: this.$store.state.user.add4
      };
      this.add2=(()=>{
        if(typeof this.userInfo.add2==='number'){
          return this.userInfo.add2
        }else{
          let i=0;
          for (const address2Element of this.api.address2) {
            if(address2Element.name===this.userInfo.add2) return i;
            i++;
          }
        }

      })();
      this.add3=(typeof this.userInfo.add3==='number'?this.userInfo.add3:this.api.address2[this.add2].list.indexOf(this.userInfo.add3));
      this.add4=this.userInfo.add4;
    }
  }
</script>

<style scoped>
  .form{
    padding:20px;
  }
</style>
